<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body>
    <div>
        <ul>
            <span>我是span</span>
            <li class="test1">li1</li>
            <li class="test1">li2</li>
            <li>li3</li>
            <li>li4</li>
            <li>li5</li>
            <li>li6</li>
            <li>li7</li>
        </ul>
    </div>
    <button>创建li标签并插入到ul</button>
    <script>
        /* 方案01 ： 获取页面中所有的li标签，通过循环来给每个标签都添加事件*/
        // let lis = document.getElementsByTagName("li");
        // for (let index = 0; index < lis.length; index++) {
        //     const element = lis[index];
        //     element.onclick = function() {
        //         console.log(`当前的索引是：${index} 当前标签的内容：${this.innerText}`);
        //     }
        // }

        let oBtn = document.getElementsByTagName("button")[0];
        let oUl = document.getElementsByTagName("ul")[0];
        oBtn.onclick = function() {
            let oLi = document.createElement("li");
            oLi.innerText = "li8";
            oUl.appendChild(oLi);
        };

        /* 02-事件委托 */
        // oUl.onclick = function(e) {
        //     e = e || window.event;
        //     let target = e.target || e.srcElement;
        //     if (target.nodeName == "LI") {
        //         console.log(`当前标签的内容：${target.innerText}`);
        //     }
        // }

        /* jQuery实现事件委托 */
        /* 委托ul标签给所有的li标签来添加点击事件 */
        // $("ul").on("click", ".test1", function() {
        // $("ul").on("click", "li,span", function() {
        $("ul").on("click", "li", function() {
            console.log(this, this.innerText, $(this).text(), $(this).index());
            /* 事件处理函数中的this就是当前的标签 */
        })
    </script>
</body>

</html>